<template>
  <!-- 裁剪 -->
  <div class="cropperArea" id="photowallUpImg">
    <img :src="tempImg" class="canvasImg" ref="canvasImg" />
    <div class="cavasBg"></div>
    <canvas class="canvas" />
    <div class="cavasDiv"></div>
    <div class="canvasBtn publicVCenter">
      <div class="btn" v-tap="{ methods: cancel }">取消</div>
      <div class="btn" v-tap="{ methods: confirm }">完成</div>
    </div>
  </div>
</template>
<script>
import canvasUp from './canvasup';

export default {
  name: 'photoWallCropper',
  computed: {},
  data() {
    return {};
  },
  props: {
    tempImg: String,
  },
  watch: {
    tempImg(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          canvasUp('#photowallUpImg', this.cropperCb);
        });
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 加载图片文件
    loadImgFile(path) {
      const img = new Image();
      img.src = path;
      return new Promise((resolve, reject) => {
        img.onload = () => {
          resolve(path);
        };
        img.onerror = () => {
          reject();
        };
      });
    },
    cancel() {
      this.$emit('cancelCropper');
    },
    confirm() {
      const rImg = this.resultFunc();
      this.$emit('confirmCropper', rImg);
    },
    cropperCb(out) {
      this.resultFunc = out;
    },
  },
  beforeCreated() {},
};
</script>
<style lang="less" scoped>
.cropperArea {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  background: #999;
  z-index: 1000;
  .canvasImg {
    position: absolute;
    z-index: 1;
  }
  .cavasBg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .canvas {
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 100;
  }
  .cavasDiv {
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
  }
  .canvasBtn {
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #333;
    z-index: 1000;
    position: absolute;
    padding: 0 50px;
    height: 100px;
    justify-content: space-between;
    .btn {
      color: #fff;
    }
  }
}
</style>
